<template>
	<view class="">
		<view class="weixin-search">
			<uni-search-bar radius="100" :focus="true" v-model="searchValue" @input="input" @cancel="cancel" bg
				bgColor="#fff" cancelText="搜索" clearButton="auto">
			</uni-search-bar>
		</view>
		<view class="search">
			<LineBorder></LineBorder>
			<view class="search-item">
				<view class="latest-search">
					<view class="primary-color">最近搜索</view>
					<view class="iconfont icon-shanchu" @click="clearSearch">
					</view>
				</view>
				<view class="search-content" v-if="searchData.length>0">
					<text class="name" v-for="(item,index) in searchData" :key="index"
						@click="toSearch(item)">{{item}}</text>
				</view>
				<view class="txt" v-else>
					暂无搜索数据
				</view>
			</view>
			<view class="search-item">
				<view class="latest-search">
					<view class="primary-color">热门搜索</view>
				</view>
				<view class="search-content">
					<text @click="hotDataClick(i)" class="name" v-for="(i,j) in hotData" :key="j">{{i}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LineBorder from '@/components/common/LineBorder.vue';
	export default {
		data() {
			return {
				searchValue: '',
				searchData: [],
				hotData: ['四件套', '薄荷']
			};
		},
		components: {
			LineBorder
		},
		methods: {
			search() {
				if (this.searchValue === '') {
					return uni.showToast({
						title: "关键词不能为空",
						icon: 'none'
					})
				} else {
					this.toSearch(this.searchValue)
				}

				// // #ifdef APP-PLUS
				// plus.key.hideSoftKeybord();
				// // #endif
				this.addSearch()
			},
			input(res) {
				this.searchvalue = res
			},
			hotDataClick(name) {
				this.toSearch(name)
			},
			cancel(res) {
				this.search()
			},
			/* 最近搜索词组 */
			addSearch() {
				// 查找搜索词索引
				let index = this.searchData.indexOf(this.searchValue)
				if (index < 0) {
					this.searchData.unshift(this.searchValue)
				} else {
					// 搜索重复词语更新到词组最前
					this.searchData.unshift(this.searchData.splice(index, 1)[0])
				}
				uni.setStorage({
					key: "searchData",
					data: JSON.stringify(this.searchData)
				})
			},
			/*清除搜索记录  */
			clearSearch() {
				uni.showModal({
					title: '提示',
					content: '是否要清除搜索记录',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorage({
								key: "searchData"
							})
							this.searchData = []
						}
					}
				});
			},
			// 点击搜索记录跳转
			toSearch(item) {
				uni.navigateTo({
					url: `/pages/searcList/searcList?searchValue=${item}`
				})
			}
		},
		// 页面加载
		onLoad() {
			uni.getStorage({
				key: "searchData",
				success: (res) => {
					this.searchData = JSON.parse(res.data)
				}
			})
		},
		// 监听页面返回
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			this.search()
		},
		// 监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputChanged(e) {
			this.searchValue = e.text
		},
		// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
		onNavigationBarSearchInputConfirmed() {
			this.search()
		}
	}
</script>

<style lang="scss">
	.search {
		.search-item {
			padding: 20rpx;

			.txt {
				text-align: center;
			}

			.latest-search {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.search-content {
				color: #ccc;
				display: flex;
				flex-wrap: wrap;

				.name {
					margin: 10rpx 20rpx;
					background-color: #e1e1e1;
					padding: 4rpx 20rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
